<template>
	<view>
		<view class="u-page">
			<view class="header">
				<view class="header-search">
					<view style="line-height: 44px;">
						<u-icon name="map"></u-icon>贵阳观山湖
					</view>
					<u-search :show-action="false" placeholder="" bg-color="#70A0EB" color="#fff" :clearabled="false"
						height="50"></u-search>
					<u-icon size="40" name="bell"></u-icon>
					<u-badge type="error" count="0" size="mini" :offset="[25, 10]"></u-badge>
				</view>
				<view class="header-tabs">
					<div v-for="tab in tapsList" :class="{ 'active': tabSelect === tab.value }"
						@click="tabSelect = tab.value" :key="tab.value">{{ tab.name }}</div>
				</view>
				<u-swiper :list="swiperList" mode="dot" name="imageUrl" border-radius="50"></u-swiper>
			</view>
			<view class="content" v-show="tabSelect === 'index'">
				<view class="content-icons">
					<view class="content-icon" v-for="i in iconsList">
						<navigator :url="i.href" hover-class="navigator-hover">
							<u-image :src="i.image" width="90px" height="90px"></u-image>
							<text style="display: flex;justify-content: center; margin-top: -15px;">{{i.title}}</text>
						</navigator>
					</view>
				</view>
				<view class="content-hot">
					<u-section title="热门榜单" font-size="34" sub-title="更多" :show-line="false"></u-section>
					<view class="content-hot-project">
						<view class="project" v-for="i in 3">
							<image src="../../static/image/h1.png"></image>
							<text class="title">黔东南</text>
							<view class="detail">
								<text>西江千户苗寨景区</text>
							</view>
						</view>
					</view>
				</view>
				<view class="content-hot-new">
					<u-section title="热点咨询" font-size="34" :show-line="false" :right="false"></u-section>
					<view class="content-hot-project" v-for="item in hotNewsList">
						<view class="project">
							<view class="detail">
								<text>{{item.title}}</text>
								<view class="detail-info">
									<text>{{item.source}}</text>
									<text style="margin-left: 20px;">{{item.createTime}}</text>
								</view>
							</view>
							<image :src="item.titlePic"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="content" v-show="tabSelect === 'serve'">
				<h4>便民服务页面</h4>
			</view>
			<view class="content" v-show="tabSelect === 'active'">
				<h4>活动页面</h4>
			</view>
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar v-model="current" :list="list" :mid-button="true"></u-tabbar>
		<image></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
						pagePath: '/',
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '视频',
						customIcon: false,
						pagePath: '/',
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发布',
						midButton: true,
						pagePath: '/release',
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '圈子',
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						// count: 23,
						isDot: false,
						customIcon: false,
					},
				],
				listConfig: {
					shape: 'circle',
					mode: 'plain'
				},
				current: 0,
				show: false,
				tapsList: [{
					name: '首页',
					value: 'index'
				}, {
					name: '便民服务',
					value: 'serve'
				}, {
					name: '活动',
					value: 'active',
					count: 5
				}],
				tabSelect: 'index',
				swiperList: [],
				hotNewsList: [],
				iconsList: [{
						image: "../../static/image/1.png",
						title: "文化",
						href: "/pages/home/culture"
					},
					{
						image: "../../static/image/2.png",
						title: "旅游",
						href: "/pages/xh-page/travel/travel"
					},
					{
						image: "../../static/image/3.png",
						title: "产业",
						href: "/pages/home/industry"
					},
					{
						image: "../../static/image/4.png",
						title: "教育"
					},
					{
						image: "../../static/image/5.png",
						title: "酒店"
					},
					{
						image: "../../static/image/6.png",
						title: "攻略"
					},
					{
						image: "../../static/image/7.png",
						title: "附件"
					},
					{
						image: "../../static/image/8.png",
						title: "智能问答"
					}
				]
			}
		},
		async onLoad() {
			const res = await this.$u.api.getBanner()
			this.swiperList = res.records

			const hotRes = await this.$u.api.getHotNews({
				pageNo: 1,
				pageSize: 10
			})
			this.hotNewsList = hotRes.records

		},
	}
</script>

<style scoped lang="less">
	.u-page {
		.header {
			background-color: #558EE7;
			padding: 10px;

			.header-search {
				color: #FFFFFF;
				display: flex;

				.u-search {
					margin: 0 15px !important;
				}
			}

			.header-tabs {
				display: flex;

				>div {
					padding: 2px 10px;
					box-sizing: border-box;
					// border: 1px solid white;
					color: white;
					border-radius: 20px;
					margin-right: 10px;

					&.active {
						color: black;
						background-color: white;
					}
				}

				.u-tabs {
					background-color: #558EE7 !important;
				}
			}

			.u-swiper-wrap {
				margin-top: 10px;
			}
		}

		.content {
			.content-icons {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				.u-image {
					padding: 20px;
				}

				.img {
					height: 91px;
					flex: 1;
				}
			}

			.content-hot {
				margin: 11px;
				margin-top: 50px;

				.content-hot-project {
					margin-top: 20px;
					display: flex;
					justify-content: space-around;

					.project {
						width: 108px;
						height: 135px;
						display: inline-block;
						position: relative;
						color: #fff;

						.title {
							position: absolute;
							left: 25px;
							bottom: 66px;
							font-size: 19px;
							font-family: PingFang SC;
							font-weight: 500;

						}

						.detail {
							position: absolute;
							bottom: 49px;
							width: 100%;
							opacity: 0.61;
							background-color: #000000;
							font-size: 8px;
							font-family: PingFang SC;
							font-weight: 500;
							text-align: center;
						}

						uni-image {
							width: 100%;
							height: 135px;
						}
					}
				}
			}

			.content-hot-new {
				margin-top: 20px;
				padding: 10px;

				.content-hot-project {
					.project {
						margin: 10px;
						display: flex;
						margin-top: 18px;

						.detail {
							flex: 2;
							// margin-left: 17px;
							margin-right: 18px;
							font-size: 14px;
							font-family: PingFang SC;
							font-weight: 500;
							color: #161616;

							.detail-info {
								display: block;
								margin-top: 6px;
								font-size: 8px;
								font-family: PingFang SC;
								font-weight: 500;
								color: #A4A4A4;
							}
						}
					}
				}

				uni-image {
					width: 108px;
					height: 61px;
					display: inline-block;
				}

			}
		}
	}
</style>
